<template>
  <div id="app" @click="clear">
    <navbar ref="nav" :show="true"></navbar>
    <nprogress-container></nprogress-container>
    <sidebar :show="sidebar.opened && !sidebar.hidden" :type.sync="sidebar.type"></sidebar>
    <sidebarl ref="sides" v-if="sidebarl.opened" :show="!sidebarl.hidden"></sidebarl>
    <app-main ref="main"></app-main>
    <toast ref="toast" :visible="toastStatus" @close="closeToast" :msg="msg" @sub="sub"></toast>
  </div>
</template>

<script>
  import NprogressContainer from 'vue-nprogress/src/NprogressContainer'
  import { Navbar, Sidebar, Sidebarl, AppMain, FooterBar} from 'components/layout/'
  import { mapGetters, mapActions } from 'vuex'
  import toast from './views/components/toast.vue'

  export default {
    data () {
      return {
        type:'',
        toastStatus:false,
        msg:''
      }
    },
    components: {
      Navbar,
      Sidebar,
      Sidebarl,
      AppMain,
      FooterBar,
      NprogressContainer,
      toast
    },

    beforeMount () {
      const { body } = document
      const WIDTH = 768
      const RATIO = 3

      const handler = () => {
        if (!document.hidden) {
          let rect = body.getBoundingClientRect()
          let isMobile = rect.width - RATIO < WIDTH
//          this.toggleDevice(isMobile ? 'mobile' : 'other')
//
//          this.toggleSidebar(!isMobile)
          this.toggleDevice('other')

          this.toggleSidebar(false)
        }
      }

      document.addEventListener('visibilitychange', handler)
      window.addEventListener('DOMContentLoaded', handler)
      window.addEventListener('resize', handler)
    },

    computed: mapGetters({
      sidebar: 'sidebar',
      sidebarl: 'sidebarl',
    }),
    mounted(){
      this.$http.get('file/api/domains',{}).then(function(res){
        window.IMG_PATH = res.data[0]
      })
    },
    methods: Object.assign(mapActions([
      'toggleDevice',
      'toggleSidebar'
    ]),{
      toasts (msg,fun) {
        let vm = this
        this.msg = msg
        this.sub = function (callback) {
          fun.apply(this,[callback])
          vm.closeToast()
        }
        this.toastStatus = true
      },
      closeToast () {
        this.toastStatus = false
      },
      sub () {
      },
      see () {
      },
      clear () {
        this.$store.state.label = ''
      }
    })
  }
</script>

<style lang="scss">
  @import '~animate.css';
  @import "./assets/css/common.css";
  @import "./assets/css/main.css";
  @import "./assets/css/swiper.min.css";
  @import "./assets/css/admin.css";

  .tpl .content-left{
    width: 120px;
    float: left;
    border: 1px dashed #efefef;
  }
  .tpl .content-right{
    width: calc(100% - 140px);
    float: right;
    border: 1px dashed #efefef;
  }

  tr td:last-child,tr th:last-child{
    text-align: center;
  }
  .btn-group{
    display: inline-block;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dfdfdf;
  .btn{
    border: none;
    border-radius: 0;
    padding: 2px 8px;
    color: #333;
    border-right: 1px solid #dfdfdf;
  &:last-child{
     border-right: none;
   }
  &:hover{
     background: #eee;
   }
  }
  }
  .animated {
    animation-duration: .377s;
  }

  @import '~bulma';

  @import '~wysiwyg.css/wysiwyg.sass';

  $fa-font-path: '~font-awesome/fonts/';
  @import '~font-awesome/scss/font-awesome';

  html {
    background-color: whitesmoke;
  }

  .nprogress-container {
    position: fixed !important;
    width: 100%;
    height: 50px;
    z-index: 2048;
    pointer-events: none;

  #nprogress {
    $color: #48e79a;

  .bar {
    background: $color;
  }
  .peg {
    box-shadow: 0 0 10px $color, 0 0 5px $color;
  }

  .spinner-icon {
    border-top-color: $color;
    border-left-color: $color;
  }
  }
  }
  .edui-combobox-menu .edui-combobox-item-label{
    color: #000;
  }
</style>

